<template>
	<view class="userInfo">
		<view class="content-wrapper">
			<view class="userInfo-form">
				<view class="userInfo-form-items">
					<view class="userInfo-form-items-title">昵称</view>
					<input type="text" class="userInfo-input" placeholder="昵称" v-model="form.nickName" maxlength="11" />
				</view>
				<view class="userInfo-form-items">
					<view class="userInfo-form-items-title">邮箱</view>
					<input maxlength="30" type="text" class="userInfo-input" placeholder="邮箱" v-model="form.email" />
				</view>
			</view>
		</view>
		<div class="submit-wrapper">
			<button style="background-color: #1296db;" type="primary" class="userInfo-btn"
				@click="userInfoHandler">确定</button>
		</div>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue'
	import {
		useRouter,
		toast,
		setStorageSync,
		getStorageSync,
		clearStorageSync
	} from '@/utils/index.js'
	import {
		updateBaseInfo
	} from '@/api/userInfo.js'

	const currentUser = getStorageSync("currentUser")

	if (!currentUser) {
		clearStorageSync()
		useRouter('/pages/login/login', 'reLaunch')
	}
	const form = ref({
		nickName: currentUser.nickName,
		email: currentUser.email,
	})

	const userInfoHandler = async () => {
		//只允许英文字母、数字、下划线、英文句号、以及中划线组成
		const emailPattern = /\w+@\w+(\.\w+)+/
		//^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$
		if (!form.value.nickName) {
			toast("昵称不能为空")
			return
		} else if (!form.value.email) {
			toast("邮箱不能为空")
			return
		} else if (!emailPattern.test(form.value.email)) {
			toast("邮箱格式错误")
			return
		} else {
			currentUser.email = form.value.email
			currentUser.nickName = form.value.nickName

			const result = await updateBaseInfo({
				email: form.value.email,
				nickName: form.value.nickName,
				id: currentUser.id
			})
			currentUser.email=form.value.email
			currentUser.nickName=form.value.nickName
			setStorageSync("currentUser", currentUser)
			toast("更新用户信息成功")
			useRouter("/pages/my/my",{},"switchTab")
		}
	}
</script>

<style lang="less">
	page {
		background: #F4F5F6;
	}

	.img_code {
		width: 60px;
		height: 30px;
	}

	.userInfo {
		.content-wrapper {
			width: 100%;


			.title {
				margin-top: 35rpx;
				width: 100%;
				margin-bottom: 10px;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 30px;
					height: 30px;
					margin-right: 5px;
				}

				h1 {
					border: 0px;
					text-align: center;
					height: 50px;
					line-height: 50px;
					font-size: 17px;
					overflow: hidden;
					font-weight: 400;
				}
			}


			.userInfo-form {
				margin: 20px 10px 20px 15px;
				background: #FFFFFF;

				.userInfo-form-items {
					padding: 15px 10px;
					border-bottom: 1px solid #F3F4F5;
					position: relative;
					display: -webkit-flex;
					display: flex;
					align-items: center;

					.userInfo-form-items-title {
						width: 30%;
						line-height: 22px;
						height: 22px;
						flex-shrink: 0;
					}

					.userInfo-input {
						width: 100%
					}

				}
			}
		}

		.submit-wrapper {
			padding: 10px;
			padding-top: 10px;
			background-color: 11ffff;
		}

	}

	.footer {
		padding: 10px;
		display: flex;
	}
</style>